import styled from 'styled-components'
import IconEmpty from '../asserts/empty.svg'
import { useTranslation } from 'react-i18next'
import { CSSProperties } from 'react'
import Icon from './Icon'

const Container = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 20%;
    box-sizing: border-box;
    color: ${(prop) => prop.theme.text.empty};
`

const TextBox = styled.div`
    font-size: 1rem;
    margin-top: 1.125rem;
`

const Title = styled.div``
const SubTitle = styled.div`
`

interface Props {
    icon?: string;
    width?: string;
    height?: string;
    title?: string;
    subTitle?: string;
    className?: string;
    style?: CSSProperties;
}

const Empty: React.FC<Props> = ({ icon, width, height, title, subTitle, className, style }) => {
    const { t } = useTranslation()
    return <Container
        className={className}
        style={style}
    >
        <Icon
            src={icon || IconEmpty}
            alt='empty'
            width={width}
            height={height}
        />
        <TextBox>
            <Title>{title || t('empty.none')}</Title>
            <SubTitle>{subTitle}</SubTitle>
        </TextBox>
    </Container>
}

export default Empty